<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制台</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Arial', sans-serif;
            background: #ecf0f1;
            color: #2c3e50;
        }

        .page-header {
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .page-description {
            color: #7f8c8d;
            font-size: 14px;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .card-title {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }

        .card-value {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .card-footer {
            display: flex;
            align-items: center;
            font-size: 12px;
        }

        .card-footer.up {
            color: #2ecc71;
        }

        .card-footer.down {
            color: #e74c3c;
        }

        .card-footer i {
            margin-right: 5px;
        }

        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }

        .chart-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .chart {
            height: 300px;
        }

        .recent-activity {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .activity-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .activity-item {
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #ecf0f1;
        }

        .activity-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .activity-icon.in {
            color: #2ecc71;
            background: rgba(46, 204, 113, 0.1);
        }

        .activity-icon.out {
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.1);
        }

        .activity-content {
            flex: 1;
        }

        .activity-message {
            margin-bottom: 5px;
        }

        .activity-time {
            font-size: 12px;
            color: #7f8c8d;
        }
    </style>
</head>
<body>
<div class="page-header">
    <h1 class="page-title">控制台</h1>
    <p class="page-description">欢迎使用仓库管理系统，今天是 2023年11月15日</p>
</div>

<div class="card-container">
    <div class="card">
        <div class="card-title">总库存量</div>
        <div class="card-value">1,248</div>
        <div class="card-footer up">
            <i class="fas fa-arrow-up"></i>
            <span>12.5% 较上月</span>
        </div>
    </div>

    <div class="card">
        <div class="card-title">今日入库</div>
        <div class="card-value">42</div>
        <div class="card-footer up">
            <i class="fas fa-arrow-up"></i>
            <span>8.3% 较昨日</span>
        </div>
    </div>

    <div class="card">
        <div class="card-title">今日出库</div>
        <div class="card-value">38</div>
        <div class="card-footer down">
            <i class="fas fa-arrow-down"></i>
            <span>3.2% 较昨日</span>
        </div>
    </div>

    <div class="card">
        <div class="card-title">库存预警</div>
        <div class="card-value">7</div>
        <div class="card-footer down">
            <i class="fas fa-arrow-up"></i>
            <span>2.1% 较昨日</span>
        </div>
    </div>
</div>

<div class="chart-container">
    <div class="chart-title">库存趋势</div>
    <div class="chart" id="inventoryChart">
        <!-- 图表将通过JavaScript渲染 -->
        <canvas id="chartCanvas" height="300"></canvas>
    </div>
</div>

<div class="recent-activity">
    <div class="activity-title">最近活动</div>

    <div class="activity-item">
        <div class="activity-icon in">
            <i class="fas fa-sign-in-alt"></i>
        </div>
        <div class="activity-content">
            <div class="activity-message">电子产品入库 50件</div>
            <div class="activity-time">2023-11-15 09:25</div>
        </div>
    </div>

    <div class="activity-item">
        <div class="activity-icon out">
            <i class="fas fa-sign-out-alt"></i>
        </div>
        <div class="activity-content">
            <div class="activity-message">办公用品出库 24件</div>
            <div class="activity-time">2023-11-15 08:40</div>
        </div>
    </div>

    <div class="activity-item">
        <div class="activity-icon in">
            <i class="fas fa-sign-in-alt"></i>
        </div>
        <div class="activity-content">
            <div class="activity-message">五金配件入库 120件</div>
            <div class="activity-time">2023-11-14 17:30</div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 设置当前日期
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();
    document.querySelector('.page-description').textContent = `欢迎使用仓库管理系统，今天是 ${year}年${month}月${day}日`;

    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('chartCanvas').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
                datasets: [
                    {
                        label: '入库',
                        data: [120, 150, 180, 200, 220, 250, 230, 240, 260, 280, 300],
                        borderColor: '#2ecc71',
                        backgroundColor: 'rgba(46, 204, 113, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '出库',
                        data: [100, 130, 160, 180, 200, 230, 210, 220, 240, 260, 280],
                        borderColor: '#e74c3c',
                        backgroundColor: 'rgba(231, 76, 60, 0.1)',
                        tension: 0.3,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false
                    }
                }
            }
        });

        // 通知父窗口当前iframe高度
        const height = document.documentElement.scrollHeight;
        window.parent.postMessage({
            type: 'frameHeight',
            height: height
        }, '*');
    });

    // 监听窗口大小变化
    window.addEventListener('resize', function() {
        const height = document.documentElement.scrollHeight;
        window.parent.postMessage({
            type: 'frameHeight',
            height: height
        }, '*');
    });
</script>
</body>
</html>